<template>
	<view>
		<view v-if="WorkList.length" class="record">
			<view class="grid-item" v-for="(v,i) in WorkList" :key="i" @click="goTo(v)">
				<image class="cover-img" :src="v.work.image" mode="aspectFill"></image>
				<view class="msg">
					<view class="title u-line-2">
						{{v.work.title}}
					</view>
					<view class="info">
						<image :src="v.work.user.avatar" mode="scaleToFill"></image>
						<text>{{v.work.user.nickname}}</text>
					</view>
				</view>
			</view>
		</view>
		<nullPage v-else title="暂无记录"></nullPage>
	</view>
</template>

<script>
	import nullPage from "@/components/nullPage.vue"
	export default {
		components: {
			nullPage
		},
		data() {
			return {
				total: 0,
				WorkList: [],
				page: 1,
				work_type: "", //1收藏 2点赞3浏览
			}
		},
		onLoad(options) {
			if (options.work_type) {
				if (options.work_type == 1) {
					uni.setNavigationBarTitle({
						title: "我的收藏"
					});
				} else if (options.work_type == 2) {
					uni.setNavigationBarTitle({
						title: "我的点赞"
					});
				} else if (options.work_type == 3) {
					uni.setNavigationBarTitle({
						title: "浏览记录"
					});
				}
				this.work_type = options.work_type
				this.userOperateRecord()
			} else {
				uni.setNavigationBarTitle({
					title: "解锁记录"
				});
				this.userUnlockRecord()
			}
		},
		methods: {
			// 解锁记录
			async userUnlockRecord() {
				let res = await this.$http("api/user/userUnlockRecord", {
					page: this.page,
					size: 10, //true	int		每页多少条
				}, "GET")
				if (res.code == 200) {
					this.WorkList = this.WorkList.concat(res.result.data)
					this.total = res.result.total
				}
			},
			//收藏/点赞/浏览记录
			async userOperateRecord() {
				let res = await this.$http("api/user/userOperateRecord", {
					work_type: this.work_type,
					page: this.page,
					size: 10, //true	int		每页多少条
				}, "GET")
				if (res.code == 200) {
					this.WorkList = this.WorkList.concat(res.result.data)
					this.total = res.result.total
				}
			},
			// 前往详情页面
			async goTo(data) {
				// console.log(data);
				let res = await this.$http("api/work/getWorkInfo", {
					id: data.work.id
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					if (res.result.is_unlock) {
						this.navigateTo(`/pages/index/content?id=${res.result.id}`)
					} else {
						this.navigateTo(`/pages/index/unlock?id=${res.result.id}`)
					}
				}
			},
		},
		onReachBottom() {
			if (this.WorkList.length >= this.total) return
			this.page += 1
			if (this.work_type) {
				this.userOperateRecord()
			} else {
				this.userUnlockRecord()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}

	.record {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 18rpx;
		grid-row-gap: 16rpx;
		padding: 32rpx;

		.grid-item {
			// break-inside: avoid;
			// width: 334rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			// margin-bottom: 16rpx;
			padding: 8rpx;
			box-sizing: border-box;

			.cover-img {
				display: block;
				width: 100%;
				height: 392rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}

			.msg {
				width: 100%;

				.title {
					font-weight: bold;
					font-size: 24rpx;
					line-height: 36rpx;
					color: #333333;
					letter-spacing: 2rpx;
					padding: 8rpx;
				}

				.info {
					display: flex;
					align-items: center;
					padding-bottom: 8rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
					}

					text {
						padding-left: 8rpx;
						font-weight: bold;
						font-size: 20rpx;
						color: #8D8F90;
					}
				}
			}
		}
	}
</style>